<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="支付设置" name="second">
        <el-table
          :data="tableData"
          style="width: 100%; margin-top: 20px; margin-bottom: 60px"
          border
          ref="multipleTable"
        >
          <el-table-column label="支付方式" align="left" width="300px">
            <template v-slot="scope">
              <div class="media">
                <img
                  :src="scope.row.src"
                  class="mr-3 rounded-circle"
                  style="width: 45px; height: 45px"
                />
                <div class="media-body">
                  <h6 class="mt-0 d-flex align-items-center justify-content-between">
                    {{ scope.row.name }}
                  </h6>
                  <small class="d-block text-secondary text-left">{{scope.row.desc}}</small>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200px">
            <template>
              <el-button type="text" size="medium">配置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="购物设置" name="third">
        <el-form ref="form" label-width="130px">
          <el-form-item label="未支付订单">
            <el-input
              placeholder="未支付订单"
              size="mini"
              style="width: 25%"
              type="number"
            >
            <template slot="append">天后自动关闭</template>
            </el-input>
          </el-form-item>
          <el-form-item label="已发货订单">
            <el-input
              placeholder="已发货订单"
              size="mini"
              style="width: 25%"
              type="number"
            >
            <template slot="append">天后自动确认收货</template>
            </el-input>
          </el-form-item>
           <el-form-item label="已完成订单">
            <el-input
              placeholder="已完成订单"
              size="mini"
              style="width: 25%"
              type="number"
            >
            <template slot="append">天内允许申请售后</template>
            </el-input>
          </el-form-item>
          <el-form-item label="运费组合策略">
              <el-select placeholder="请选择运费组合策略" size="mini" v-model="type">
                  <el-option label="区域一" value="北京"></el-option>
                  <el-option label="区域二" value="上海"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
        type:'',
      activeName: "second",
      tableData: [
        {
          name: "银联卡支付",
          desc: "该系统支持即时到账接口",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F11%2F3%2F59feb3aa-4250-4f5d-acb5-cb2efb635b17.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641790508&t=18e8472c78aa51569713d987a1a4886a",
        },
        {
          name: "支付宝支付",
          desc: "该系统支持即时到账接口",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F11%2F3%2F59feb3aa-4250-4f5d-acb5-cb2efb635b17.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641790508&t=18e8472c78aa51569713d987a1a4886a",
        },
        {
          name: "微信支付",
          desc: "该系统支持即时到账接口",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F11%2F3%2F59feb3aa-4250-4f5d-acb5-cb2efb635b17.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641790508&t=18e8472c78aa51569713d987a1a4886a",
        },
      ],
    };
  },
  components: {},
  props: {},
  created() {},
  computed: {},
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped>
</style>
